<template>
    <div id="app">
        <div class="break" style="margin-bottom:20px;">
            <t-breadcrumb :max-item-width="'150'">
                <t-breadcrumbItem to="/vue-next/components/menu">店铺管理</t-breadcrumbItem>
                <t-breadcrumbItem>店铺列表</t-breadcrumbItem>
            </t-breadcrumb>
        </div>
        <div class="btns">
            <t-button theme="success" @click="goToAdd">添加商店</t-button>
        </div>
        <t-loading :loading="loading" size="medium" show-overlay>
            <t-base-table stripe bordered hover row-key="id" :data="storelist" :columns="columns" :max-height="'70vh'"
                :pagination="{ total: storelist.length }">
                <template #btn="{ col, row }">
                    <t-button variant="outline" theme="primary" @click="goToStoreDetail(row.id)">查看</t-button>
                    <t-popconfirm @confirm="deleteShop(row.id)" content="确认删除吗">
                        <t-button>删除</t-button>
                    </t-popconfirm>
                </template>

            </t-base-table>
        </t-loading>
        <t-dialog v-model:visible="visibleBody" attach="body" header="添加商店" :on-confirm="() => (visibleBody = false)">
            <template #body>
                <div id="container"></div>
                <div id="panel"></div>
            </template>
        </t-dialog>
    </div>
</template>

<script setup>
import { getStorelistData, deleteSHOP } from '@/http/modules/store'
import { ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
const storelist = ref([]);
const router = useRouter();
const loading = ref(true)
const columns = [
    {
        width: '100',
        colKey: 'id',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'name',
        title: '店铺名称',
    },
    {
        colKey: 'address',
        title: '地址',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'type-slot-name',
    },
    // {
    //     colKey: 'longitude',
    //     title: '经度',
    // },
    // {
    //     colKey: 'latitude',
    //     title: '纬度',
    // },
    {
        colKey: 'phone',
        title: '电话',
    },
    {
        colKey: 'type',
        title: '操作',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'btn',
    },
];
getStorelistData().then(res => {
    storelist.value = res;
    loading.value = false
})
const visibleBody = ref(false)
// 1.添加商店字段功能
const goToAdd = () => {
    router.push('shoreAdd')
}

// 2.查看商店详细信息功能
const goToStoreDetail = (id) => {
    router.push({
        path: 'shoreDetail',
        query: {
            id
        }
    })
}

// 3.删除商店功能
const deleteShop = (n) => {
    deleteSHOP(n).then(res => {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getStorelistData().then(res => {
            storelist.value = res;
        })
    })
}
</script>
 
<style lang="less" scoped>
.btns {
    margin-bottom: 20px;
}

#panel {
    position: absolute;
    background-color: white;
    max-height: 10%;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    width: 10px;
}
</style>